<template>
	<view class="content">
		<view class="header">
			<image class="logo" @click="goindex()" :src="_baseURL + setting.site_logo" mode=""></image>
			<view class="nologin" v-if="showinfonav">
				<view class="to-login" @click="gologin()">登录</view>
				<!-- <view class="com-btn" @click="goregister()">注册</view> -->
			</view>
			<view v-else class="after-login">
				<view class="balance">
					<image class="jinbi" src="../../static/img/jinbi.png" mode=""></image>
					<view class="yue">${{userinfo.money}}</view>
					<image @click="getrefresh()" class="shuaxin" :class="isrefresh ? 'ssssxuanzhuan':''" src="../../static/img/shuaxin.png" mode=""></image>
					<view class="qianbao">
						<image src="../../static/img/qianbao.png" mode=""></image>
					</view>
				</view>
				<view class="com-my" @click="gouserindex()">
					<image src="../../static/img/avatar.webp" mode=""></image>
				</view>
			</view>
		</view>
		<liuyuno-tabs ref="liuyuno" :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
		<view class="active_content">
			<view v-for="item in data" class="active_content_view"  @click="open(item)">
				<image :src="_baseURL + item.title_img"></image>
	
			</view>

		</view>
		<view id="active_popup" v-if="show">
			<view class="active_popup">
				<image src="../../static/img/close2.png" class="_close" @click="show = false"></image>
				<!-- <h5>{{show_data.title}}</h5> -->
				<image :src="_baseURL + show_data.title_img" class="img1" mode="widthFix"></image>
				<!-- <router-link to="" class="a1">前往活动</router-link> -->
				<image src="../../static/img/down.png" class="img2"></image>
				<h6>活动内容</h6>
				<view class="active_popup_content" v-html="show_data.rule_content">
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	import { getuserinfo,activity_list,sysconfig } from '../../api/api.js'
	import { baseURL } from '../../api/http.js'
	export default {
		components: {
		    liuyunoTabs
		},
		data() {
			return {
				show:false,
				tabs:[
					'首页',
					'电子',
					'真人',
					'彩票',
					'体育',
					'电竞',
					'捕鱼',
					'棋牌'
				],
				defaultIndex:0,
				showinfonav:true,
				userinfo:[],
				showmore:false,
				data: [],
				_baseURL: baseURL,
				show_data:[],
				setting: []
			}
		},
		onLoad() {
			this.activity_list()
			this.getsysconfig()
		},
		onShow() {
			if (uni.getStorageSync('userinfo')) {
				this.userinfo = JSON.parse(uni.getStorageSync('userinfo'))
			}
			if (uni.getStorageSync('token')) {
				this.showinfonav = false
				this.getuserinfo()
			}
		},
		methods: {
			getsysconfig() {
				sysconfig().then(res => {
					if (res.data.status.errorCode == 0) {
						this.setting = res.data.data
					} else {
						uni.showToast({
							title: res.data.status.msg,
							icon: 'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goindex(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			getrefresh() {
				let that = this;
				this.isrefresh = true;
				setTimeout(function(){
					that.isrefresh = false;
				},1000)
				this.getuserinfo();
			},
			getuserinfo(){
				getuserinfo().then(res => {
					if(res.data.status.errorCode == 0){
						this.userinfo = res.data.data.member
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			activity_list(){
				activity_list().then(res => {
					if(res.data.status.errorCode == 0){
						this.data = res.data.data.data

					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			open(item){
				this.show = true
				this.show_data = item
			},
			tabClick(e){
				console.log(e)
			},
			changetab(e){
				this.$refs['liuyuno'].tabClick(e)
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			goregister(){
				uni.navigateTo({
					url:'/pages/login/register'
				})
			}
		}
	}
	
</script>

<style scoped>
	#active_popup{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;
	}
	#active_popup .active_popup{
		position: absolute;
		bottom: 0;
		height: 80vh;
		background-color: #202125;
		width: 100%;
		border-top-left-radius: 30rpx;
		overflow-y: auto;
		border-top-right-radius: 30rpx;
	}
	#active_popup .active_popup > h5{
		text-align: center;
		color: #fff;
		font-size: 46rpx;
		position: absolute;
		top: 100rpx;
		text-align: center;
		width: 100%;
		z-index: 100;
	}
	#active_popup .active_popup > h6{
		padding-top: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 42rpx;
		text-align: center;
	}
	#active_popup .active_popup ._close{
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 100;
		width: 60rpx;
		height: 60rpx;
	}
	#active_popup .active_popup .img1{
		width: 100%;
		height: 1150rpx;
	}
	#active_popup .active_popup .a1{
		box-shadow: 0 .05907rem 0 0 #d9a715,inset 0 0 .18605rem .04429rem rgba(243,48,48,.34),0 .02952rem .09155rem .04429rem rgba(255,123,1,.34);
		background: #ffdd19;
		color: #1c1e22;
		margin: -220rpx auto 50rpx;
		display: block;
		width: 200rpx;
		text-align: center;
		z-index: 100;
		position: relative;
		text-decoration: none;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 80rpx;
		border-radius: 10rpx;
	}
	#active_popup .active_popup .img2{
		width: 80rpx;
		margin: -100rpx auto 0;
		display: block;
		height: 60rpx;
	}
	#active_popup .active_popup_content{
		color: #fff;
		font-size: 30rpx;
		padding:50rpx 30rpx;
	}
	*{
		box-sizing: border-box;
	}
	
	/deep/ *::-webkit-scrollbar {
		display: none;
	}
	/deep/ *{
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	.active_content{
		height: calc(100vh - 190rpx);
		overflow-y: scroll;
		width: 100%;
		padding-top: 10px;;
	}
	.active_content_view{
		padding: 10rpx 30rpx;
	}
	.active_content_view image{
		width: 100%;
		height: 320rpx;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #212125;
	}
	.header{
		width: 100%;
		height: 100rpx;
		padding-right: 24rpx;
		padding-left: 39rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo{
		width: 100rpx;
		height: 80rpx;
	}
	.nologin,.after-login{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.to-login{
		word-break: break-all;
		text-align: center;
		font-weight: 700;
		margin-right: 40rpx;
		font-size: 26rpx;
		color: #fff;
		padding-top: 8rpx;
	}
	.com-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 204rpx;
		height: 64rpx;
		background: #fee619;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
		border-radius: 12rpx;
		font-weight: 700;
		padding-top: 8rpx;
		font-size: 26rpx;
		color: #1c1e22;
		word-break: break-all;
		text-align: center;
	}
	.con{
		width: 100%;
		padding: 24rpx 20rpx 40rpx 20rpx;
	}
	.swiper-item{
		width: 100%;
		height: 288rpx;
		border-radius: 12rpx;
	}
	.swiper-item image{
		width: 100%;
		height: 288rpx;
		border-radius: 12rpx;
	}
	.games{
		width: 100%;
		margin-top: 56rpx;
	}
	.card-head{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.chleft{
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.gameicon{
		width: 38rpx;
		height: 38rpx;
		margin-right: 12rpx;
	}
	.chleft view{
		font-size: 36rpx;
		font-weight: 700;
		color: #fff;
	}
	/deep/ .uni-scroll-view-content{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: fit-content;
	}
	.items{
		width: 220rpx;
		height: 308rpx;
		border-radius: 16rpx;
		overflow: hidden;
		margin-right: 10rpx;
	}
	.items image{
		width: 100%;
		height: 100%;
	}
	.chright{
		font-size: 24rpx;
		color: #36ba73;
	}
	
	/deep/ .siwper1 .uni-swiper-slide-frame{
		width: 580rpx !important;
	}
	.changshang{
		width: 580rpx !important;
	}
	.changshang .swiper-item{
		width: 564rpx;
		padding: 18rpx 10rpx 12rpx 10rpx;
		height: 400rpx;
		background: #17181b;
		border-radius: 10rpx;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left{
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.left image{
		width: 144rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.l-title{
		font-size: 24rpx;
		color: #fff;
		line-height: 28rpx;
	}
	.l-subtitle{
		font-size: 22rpx;
		color: #97a8b8;
		line-height: 28rpx;
	}
	.info .right{
		width: 32rpx;
		height: 32rpx;
		margin-right: 28rpx;
	}
	.infoscon{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 18rpx;
	}
	.infoscon image{
		width: 166rpx;
		height: 120rpx;
	}
	.infoscon image:nth-child(-n+3){
		margin-bottom: 10rpx;
	}
	.content-wrap{
		width: 100%;
		padding: 40rpx 34rpx 0 34rpx;
	}
	.more-info{
		position: relative;
		overflow: hidden;
	}
	.more-info.normal{
		background-color: #2d3035;
	}
	.more-info.aftes::after{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: url('../../static/img/more.png') repeat top;
		background-size: 100% 100%;
	}
	.main-title{
		margin-bottom: 28rpx;
		color: #fff;
		font-size: 48rpx;
		font-weight: 500;
		line-height: normal;
	}
	.contentcon{
		width: 100%;
		padding: 24rpx 20rpx 0 20rpx;
		text-align: justify;
		padding-bottom: 154rpx;
	}
	.contentcon.close{
		overflow: hidden;
		height: 396rpx;
		padding-bottom: 0;
		filter: brightness(.5);
	}
	.contentcon.expande{
		overflow: auto;
		height: auto;
	}
	.ccitem{
		margin-bottom: 40rpx;
		color: #b7bbcc;
		font-size: 28rpx;
	}
	.ccitem h5{
		color: #fff;
		font-size: 40rpx;
		margin-bottom: 22rpx;
	}
	.ccitem h3{
		color: #fee01a;
		font-size: 28rpx;
	}
	.expande-button-wrap{
		position: absolute;
		bottom: 22rpx;
		left: 50%;
		transform: translate(-50%);
		z-index: 2;
	}
	.expande-button{
		width: 208rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 6rpx;
		text-align: center;
		background: #3f434d;
	}
	.footer{
		width: 100%;
		padding: 56rpx 0 70rpx 0;
		background: #17181b;
	}
	.service{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		padding: 0 32rpx;
	}
	.serviceitem{
		width: 100%;
	}
	.sititle{
		font-weight: 700;
		color: #fff;
		margin-bottom: 26rpx;
		font-size: 36rpx;
	}
	.cells{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.cells view{
		flex: 1;
		color: #a6b2c0;
		text-align: center;
		margin-right: 10rpx;
		font-size: 24rpx;
	}
	.cells view:last-child{
		margin-right: 0;
	}
	.line{
		background: #25272b;
		margin: 50rpx 0;
		height: 2rpx;
		width: 100%;
	}
	.supper{
		width: 100%;
		padding: 0 32rpx;
	}
	.sup-icons,.symbol-box{
		margin-bottom: 44rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sup-icons image{
		width: 80rpx;
		height: 80rpx;
	}
	.symbol-box{
		padding: 0 10rpx;
	}
	.symbol-box image{
		width: 56rpx;
		height: 56rpx;
	}
	.rules{
		width: 100%;
		margin-top: 66rpx;
		margin-bottom: 28rpx;
		padding: 0 32rpx;
	}
	.rule-icons{
		display: grid;
		grid-template-areas:
			"a b c"
			"d e f";
		gap: 48rpx 26rpx;
		margin-bottom: 64rpx;
	}
	.rule-icons image:nth-child(1){
		width: 172rpx;
		height: 36rpx;
		grid-area: a;
		place-self: center flex-start;
	}
	.rule-icons image:nth-child(2){
		width: 88rpx;
		height: 84rpx;
		grid-area: b;
		place-self: center;
	}
	.rule-icons image:nth-child(3){
		width: 208rpx;
		height: 60rpx;
		grid-area: c;
		place-self: center flex-end;
	}
	.rule-icons image:nth-child(4){
		width: 134rpx;
		height: 66rpx;
		grid-area: d;
		place-self: center flex-start;
	}
	.rule-icons image:nth-child(5){
		width: 72rpx;
		height: 104rpx;
		grid-area: e;
		place-self: center;
	}
	.rule-icons image:nth-child(6){
		width: 232rpx;
		height: 58rpx;
		grid-area: f;
		place-self: center flex-end;
	}
	.copyright{
		width: 100%;
		padding: 0 32rpx;
	}
	.copyright image{
		width: 130rpx;
		height: 70rpx;
	}
	.copyright view{
		color: #a6b2c0;
		margin-top: 30rpx;
		font-size: 22rpx;
		line-height: 38rpx;
	}
	.balance{
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 160rpx;
		max-width: 400rpx;
		height: 70rpx;
		padding-left: 32rpx;
		background: #14161a;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.jinbi{
		width: 32rpx;
		height: 28rpx;
	}
	.yue{
		font-size: 30rpx;
		padding-left: 10rpx;
		font-weight: 600;
		color: #fff;
	}
	.shuaxin{
		width: 30rpx;
		height: 30rpx;
		margin-left: 22rpx;
		margin-right: 16rpx;
	}
	.ssssxuanzhuan {
		animation: rotatefresh 1s;
	}
	
	@keyframes rotatefresh {
		from {
			transform: rotate(0deg);
		}
	
		to {
			transform: rotate(360deg);
			transition: all 0.6s;
		}
	}
	.qianbao{
		width: 72rpx;
		height: 66rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fee619;
		box-shadow: 0 2rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}
	.qianbao image{
		width: 30rpx;
		height: 30rpx;
	}
	.com-my{
		width: 70rpx;
		height: 78rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
		padding-top: 8rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.com-my image{
		width: 70rpx;
		height: 70rpx;
	}
	
	@keyframes leftru{
		0{
			translate: -100%;
		}
		100%{
			translate: 0%;
		}
	}
	@keyframes leftchu{
		0{
			translate: 0%;
		}
		100%{
			translate: -100%;
		}
	}
	.menu-wrap{
		padding: 26rpx 24rpx 140rpx 24rpx;
	}
	.indexbg{
		width: 100%;
		height: 168rpx;
	}
	.link-items{
		padding: 0 32rpx;
		margin-top: 30rpx;
		border-radius: 6rpx;
		background: #2e3035;
	}
	.link-item{
		height: 94rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.link-item image,.online-service image{
		width: 36rpx;
		height: 32rpx;
	}
	.link-item view,.online-service view{
		padding-left: 32rpx;
		font-size: 28rpx;
		color: #fff;
	}
	.online-service{
		height: 96rpx;
		margin-top: 8rpx;
		padding: 0 32rpx;
		border-radius: 6rpx;
		background: #2e3035;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	
</style>